<template>
	<div class="front storeCenter">
		<Header></Header>
		<div class="banner"></div>
		<div class="Yuncang docWidth">
			<div class="YuncangTitle">
				<span>众茶云仓</span>
			</div>
			<el-collapse @change="handleChange">
				<el-collapse-item v-for="(item,index) in titleList" :key="index"  :name="index"
					style="padding:10px 30px;">
					<template slot="title">
						<div style="display: flex;flex-direction: row;font-size: 15px;">
							<p>{{item.name}}</p>
							<p style="padding-left: 50px;">{{item.remark}}</p>
						</div>
					</template>
					<div v-if="item.children && item.children.length == 0" style="text-align: center;padding: 20px  0;">暂无数据</div>
					<div v-else class="YuncangList" v-for="(item2,index2) in item.children" :key="item2.id">
						<img :src="item2.companyLogo ?  item2.companyLogo : require('@/assets/logo.png')">
						<div class="YuncangItem">
							<span>{{item2.name}}</span>
						</div>
						<el-button v-if="index === 0 || index === 1" class="button" @click="clickDetail(item2)">点击进仓</el-button>
					</div>
				</el-collapse-item>
			</el-collapse>
			<!-- <div class="title">
        <a href="https://open.ys7.com/view/h5/7a757f6d8c11459fa74f102bac45fca7" target="break">查看云仓 >></a>
        <span>云仓介绍</span>
        <div class="more" @click="$router.push('/store/list')">进入云仓管理 >></div>
      </div> -->
			<!-- <div class="storeHtml" v-html="centerDetail.remark"></div> -->
		</div>
		<!-- <div class="docWidth">
      <div class="productList hot">
        <div class="title">人气商品</div>
        <ul>
          <li v-for="(item,index) in hotProduct" :key="index" @click="toDetail(item.gongyingId,item.id)">
            <div class="image" :style="{backgroundImage:`url(${item.image})`}"></div>
            <div class="name" :class="index === 0 ? '' : 'lineTextHidden'">{{item.name}}</div>
            <div class="price_warpper">
              <div class="price">{{item.priceText!=='面议'?'￥':''}}<span>{{item.priceText}}</span></div>
            </div>
          </li>
        </ul>
      </div>
      <div class="banner banner2"></div>
      <div class="productList">
        <div class="title">新品推荐
          <div class="more" @click="$router.push('/front-goodList?type=1')">更多商品 ></div>
        </div>
        <ul>
          <li v-for="(item,index) in newProduct" :key="index" @click="toDetail(item.gongyingId,item.id)">
            <div class="image" :style="{backgroundImage:`url(${item.image})`}"></div>
            <div class="name lineTextHidden">{{item.name}}</div>
            <div class="price_warpper">
              <div class="price">{{item.priceText!=='面议'?'￥':''}}<span>{{item.priceText}}</span></div>
            </div>
          </li>
        </ul>
      </div>
    </div>-->
		<!-- <h2 class="toManage"><span @click="$router.push('/store/list')">进入云仓管理 >></span></h2> -->
		<Footer></Footer>
	</div>
</template>

<script>
	import Footer from "@/views/front/components/Footer";
	import Header from "@/views/front/components/Header";
	import {
		StorePageVoByQo
	} from "@/api/front-home";
	import { getPageStoreList } from '@/api/store'
	import { mapGetters } from 'vuex'
	export default {
		name: "frontstoreCenter",
		components: {
			Footer,
			Header
		},
		data() {
			return {
				titleList: [
					{'name': '直营仓' ,'remark': '众茶国际的100%投资自建仓，或控股的共建仓'},
					{'name': '加盟仓' ,'remark': '茶商茶店按众茶国际数字仓标准建设和加盟'},
					{'name': '合作仓' ,'remark': '签约客户，非加盟仓、其产品库存数据在众茶国际云仓中心同步'},
				],
				listQuery: {
					pageNo: 1,
					pageSize: 10
				},
				detailListQuery: {
					pageNo: 1,
					pageSize: 10,
					type: 1
				}
			};
		},
		created() {
		},
		methods: {
			handleChange(val) {
				for (let index = 0; index < val.length; index++) {
					let element = val[index];
					let item = this.titleList[element];
					if (!item.children) {
						this.getDetailDataList(element + 1)
					}
				}
			},
			toDetail(gongyingId, productId) {
				this.$router.push({
					path: "/front-shop/productDetail",
					query: {
						id: gongyingId,
						productId: productId
					}
				});
			},
			async getDetailDataList(type) {
				this.detailListQuery.type = type
				await getPageStoreList(this.detailListQuery).then(response => { 
					let item = this.titleList[type - 1]
					this.$set(item, "children", response.list)
				}).catch(error => {
					console.log(error);
				})
			},
			clickDetail(item) {
				if (this.userInfo && this.userInfo.id) {
					this.$router.push({
						path: '/front-positions', 
						query: {'name': item.name}
					})
				} else {
					this.$confirm('请登录后执行此操作').then(() => {
						this.$router.replace(`/login?redirect=${this.$route.fullPath}`)
					})
				}
			}
		},
		computed: {
			...mapGetters(["userInfo"]),
		},
	};
</script>
<style lang="scss">
	.storeCenter {
		.storeHtml {
			img {
				max-width: 100%;
			}
		}
	}
</style>
<style lang="scss" scoped>
	.storeCenter {
		.Yuncang {
			background-color: #FFFFFF;
			box-shadow: 0px 1px 5px 0px #888888;
			border-radius: 10px;
			padding-bottom: 30px;

			.YuncangTitle {
				text-align: center;
				padding-top: 20px;
				font-size: 24px;
			}

			.YuncangList {
				display: flex;
				align-items: center;
				border-bottom: 1px solid #dedede;
				border-top: 1px solid #dedede;
				margin: 20px 20px;
				padding: 10px 10px;

				>img {
					margin-right: 10px;
					width: 50px;
					height: 50px;
				}

				.YuncangItem {
					flex: 1;
					flex-direction: column;
					line-height: 30px;
					// width: 50%;
					margin: 0 30px;

					.Yuncanglog {
						span:nth-child(1) {
							margin-right: 30px;
						}
					}
				}

				.button {
					color: #965f29 !important;
					border: 1px #965f29 solid !important;
				}
			}

		}

		.banner {
			background-position: center;
			background-size: cover;
			background-repeat: no-repeat;
			background-image: url(../../../assets/front-img/banner_yc.png);
			height: 328px;

			&.banner2 {
				background-image: url(../../../assets/front-img/banner2_yc.png);
				height: 200px;
				margin-bottom: 10px;
			}
		}

		.toManage {
			margin-top: 30px;
			color: #965f29;
			text-align: center;
			line-height: 2.5;

			span {
				cursor: pointer;
			}
		}

		.title {
			text-align: center;
			position: relative;
			padding: 20px 0 35px;
			font-size: 24px;

			a {
				position: absolute;
				left: 14px;
				line-height: 30px;
				top: 50%;
				margin-top: -15px;
				font-size: 18px;
				color: #965f29;
			}

			.more {
				cursor: pointer;
				position: absolute;
				right: 14px;
				line-height: 30px;
				top: 50%;
				margin-top: -15px;
				font-size: 18px;
				color: #965f29;
			}

			&:after {
				content: "";
				width: 30px;
				height: 4px;
				background: #965f29;
				position: absolute;
				left: 50%;
				margin-left: -15px;
				bottom: 23px;
			}
		}

		.productList {
			overflow: hidden;
			padding-bottom: 20px;

			ul {
				margin-left: -25px;
				overflow: hidden;

				li {
					float: left;
					margin-left: 25px;
					margin-bottom: 20px;
					width: 280px;
					cursor: pointer;

					.image {
						background-position: center;
						background-size: cover;
						background-repeat: no-repeat;
						height: 210px;
						border: 1px solid #e5e5e5;
					}

					.name {
						padding-top: 20px;
						line-height: 1.3;
						font-size: 18px;
						font-weight: 400;
						color: #000;
					}

					.price_warpper {
						padding-top: 7px;
						font-size: 14px;
						font-weight: 400;
						color: #555;
						display: flex;
						justify-content: space-between;
					}

					.price {
						white-space: nowrap;
						color: #a60304;
						background: rgba(255, 255, 255, 0.5);

						span {
							font-size: 20px;
						}
					}
				}
			}

			&.hot {
				li {
					width: 225px;

					&:first-child {
						width: 450px;

						.image {
							height: 450px;
						}

						.name {
							font-size: 24px;
						}

						.price_warpper {
							padding-top: 25px;
							font-size: 18px;

							span {
								font-size: 28px;
							}
						}
					}
				}
			}
		}

		.storeHtml {
			padding-bottom: 30px;
		}
	}
</style>
